import React from 'react';
import classNames from 'classnames';
import { polyfill } from 'react-lifecycles-compat';
import { typeReplace } from '../../utils/muguetDash';
import { handleSize, JSXProps } from '../../utils/handleJSXProps';
import { JSXPropsInterface } from '../../interfaces/common.interface';
import { SizeType } from '../../interfaces/types';
import { MessageProps, MsgParams } from './msg';
import Loading from '../../tools/loading/loading';
import Flex from  '../../layout/flex/flex';
import Icon from '../../tools/icon/icon';
import './style/message.css';

const prefix = 'm-message'

const customMsgTemplateAttr = [
	'icon',
	'type',
	'content',
	'options',
	'duration'
]

interface MsgTemplateProps extends MessageProps, MsgParams {}

class MessageTemplate extends React.Component<MsgTemplateProps, any> {
	refDiv: React.RefObject<{}>;
	private tempSaver;
	constructor(props){
		super(props);
		this.refDiv = React.createRef();
	}

	componentDidMount(){
		const refEle = this.refDiv.current as HTMLElement;
		const container = document.getElementById('m_message_container') as HTMLElement;
		container.style.width = refEle.offsetWidth + 5 + 'px';
		container.style.marginLeft = - container.offsetWidth/2 + 'px';
	}

	private static readonly defaultProps = {
		size: 'normal',
	}

	handleExtraProps = (): JSXPropsInterface<MsgTemplateProps> => {
		const msgTemplateProps = JSXProps<MsgTemplateProps>(this.props, customMsgTemplateAttr)
		const { customProps } = msgTemplateProps;
		customProps.size = handleSize(customProps.size as SizeType);
		return msgTemplateProps;
	}

	handleClassName = (classProps) => {
		const {
			size,
			gradients,
			className
		} = classProps.options;
		return classNames({
			[`${prefix}-default`]: true,
			[`${classNames(className)}`]: className,
			[`${prefix}-size-${size}`]: typeReplace(size as SizeType, 'String', false),
			[`m-gradients-${gradients}`]: gradients
		});
	}

	handleType = (props): React.ReactElement=>{
		const { type, options } = props;

		if(options.icon){
			return options.icon;
		}else{
			switch(type){
				case 'success': return (
					<Icon
					size={'normal' as SizeType}
					src={require('../../assets/icons/local/success.svg')}></Icon>
				);break;
				case 'info': return (
					<Icon
					size={'normal' as SizeType}
					src={require('../../assets/icons/local/information.svg')}></Icon>
				);break;
				case 'warning': return (
					<Icon
					size={'normal' as SizeType}
					src={require('../../assets/icons/local/warning.svg')}></Icon>
				);break;
				case 'danger': return (
					<Icon
					size={'normal' as SizeType}
					src={require('../../assets/icons/local/danger.svg')}></Icon>
				);break;
				case 'loading': return (
					<Loading.hoop
						size={['25px', '25px']}
					></Loading.hoop>
				);break;
				default: return (
					<Icon
					size={'normal' as SizeType}
					src={require('../../assets/icons/local/information.svg')}></Icon>
				);break;
			}
		}
	}

	render() {
		const { nativeProps, customProps } = this.handleExtraProps();
		const className = this.handleClassName(customProps);
		const mergeStyle = {
			...typeReplace(customProps.size as Object, 'Object', {}),
			...typeReplace(customProps.style as Object, 'Object', {})
		}
		this.tempSaver = customProps;
		return (
			<div
				{...nativeProps}
				className={className}
				style={mergeStyle}
				ref={this.refDiv as React.RefObject<any>}
			>
				<Flex.avg>
					{this.handleType(customProps)}
					<div
						className='m-message-content'
					>{customProps.content}</div>
				</Flex.avg>
			</div>
		)
	}
}
polyfill(MessageTemplate);
export default MessageTemplate;
